
/**
 * cell list 样式
 */
.su-list {
	background-color: --color(--p-white);
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	
	.su-list-cell:last-child::after {
		height: 0upx
	}
	&:after {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: --color(--p-cell-border)
	}
	&:before {
		position: absolute;
		z-index: 10;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: --color(--p-cell-border)
	}
	
	// 带圆角的样式
	&.border-radius{
		border-radius: 24upx;
		box-shadow: 1upx 2upx 3upx --color(--p-bg-ee);
		&:before, &:after {
			height: 0 !important;
		}
	}
}

.su-list-cell {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	
	&:after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 30upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: --color(--p-cell-border)
	}
}

.su-list-cell-pd {
	padding: 22upx 30upx
}

.su-list-cell-left {
	font-size: 28upx;
	padding: 0 30upx
}

.su-list-cell-db,
.su-list-cell-right {
	flex: 1
}

.su-list-cell-last.su-list-cell::after {
	height: 0upx
}

.su-list-cell-divider {
	position: relative;
	display: flex;
	color: --color(--p-text-99);
	background-color: --color(--p-bg-f7);
	padding: 15upx 20upx;
	&:before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: --color(--p-cell-border)
	}
	&:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: --color(--p-cell-border)
	}
}


.su-list-cell-navigate {
	font-size: 30upx;
	padding: 22upx 30upx;
	padding-right: 36upx;
	line-height: 48upx;
	position: relative;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	flex: 1;
	justify-content: space-between;
	align-items: center;
	color: --color(--p-text-black);
	&.su-navigate-right:after {
		font-family: iconfont;
		content: '\e61a';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: --color(--p-cell-arrow);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%)
	}
}

.su-navigate-badge {
	padding-right: 50upx
}

.su-collapse.su-list-cell {
	flex-direction: column
}

.su-list.su-collapse {
	box-sizing: border-box;
	height: 0;
	overflow: hidden
}

.su-collapse .su-list-cell {
	padding-left: 20upx
}

.su-collapse .su-list-cell::after {
	left: 52upx
}

.su-list.uni-active {
	height: auto
}

.su-card {
	box-shadow: none !important;
	margin: 0 !important
}

.su-list .su-list-cell:last-child::after {
	height: 0 !important
}

.su-list-cell::after,
.su-list::after,
.su-list::before {
	height: 1upx !important;
	background-color: --color(--p-cell-bb) !important
}

.su-list-cell.su-cell {
	font-size: 30upx !important;
	padding: 22upx 30upx !important;
	line-height: 48upx;
	position: relative;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	flex: 1;
	justify-content: space-between;
	align-items: center;
	padding-left: 40upx !important
}

.su-list-cell-navigate {
	font-size: 30upx !important;
	padding: 26upx 30upx !important
}

.su-list-cell-navigate.su-navigate-right:after {
	font-size: 30upx !important;
	color: --color(--p-cell-arrow) !important
}

.su-list-cell:active {
	background-color: --color(--p-white-active)
}

.su-navigator {
	padding: 28upx 30upx;
	position: relative;
	display: flex;
	align-items: center;
	background-color: --color(--p-white);
	&.kefu {
		line-height: normal;
		background-color: --color(--p-white);
		text-align: left
	}
	
	&.kefu::after {
		border: 0
	}
	&:active {
		background-color: --color(--p-white-active);
	}
	&:before {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1upx;
		border-top: 1upx solid --color(--p-cell-bb);
		color: --color(--p-cell-bb);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		left: 15upx
	}
	&:first-child:before {
		display: none
	}
	.icon {
		padding-left: 10upx;
		padding-right: 10upx
	}
}

.su-order-option:active {
	background-color: --color(--p-white-active);
}


.su-navigator-text {
	flex: 1;
	color: --color(--p-text-34);
	font-size: 30upx
}

.su-navigator-arrow {
	padding-right: 26upx;
	position: relative;
	margin-right: -23upx;
	font-size: 28upx;
	color: --color(--p-cell-arrow);
	
	&:after {
		content: " ";
		display: inline-block;
		height: 18upx;
		width: 18upx;
		border-width: 4upx 4upx 0 0;
		border-radius: 4upx;
		border-color: --color(--p-cell-bf);
		border-style: solid;
		transform: matrix(.71, .71, -.71, .71, 0, 0);
		position: absolute;
		top: 50%;
		margin-top: -10upx;
		right: 28upx
	}
}


